<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <img class="activator" id="activator" src="https://s2.svgbox.net/hero-outline.svg?ic=menu-alt-1&color=khaki" width="32" height="32"> <nav> <ul> <li><a href=""><img src="https://s2.svgbox.net/hero-outline.svg?ic=bell&color=red" width="32" height="32"></a></li> <li><a href=""><img src="https://s2.svgbox.net/hero-outline.svg?ic=beaker&color=lightblue" width="32" height="32"></a></li> <li><a href=""><img src="https://s2.svgbox.net/hero-outline.svg?ic=chart-bar&color=purple" width="32" height="32"></a></li> <li><a href=""><img src="https://s2.svgbox.net/hero-outline.svg?ic=cloud-download&color=orange" width="32" height="32"></a></li> </ul> </nav> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js" integrity="sha512-cdV6j5t5o24hkSciVrb8Ki6FveC2SgwGfLE31+ZQRHAeSRxYhAQskLkq3dLm8ZcWe1N3vBOEYmmbhzf7NTtFFQ==" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/CSSRulePlugin.min.js" integrity="sha512-0bzaetZStCnsUgbCtGVxftzF/L32PNOnrMlYLXwBOKl8cUjTSSDfJVyyJsNwGoI0iE0WUqni2eEfO35kJjFj5g==" crossorigin="anonymous"></script> <script> let card = document.getElementById('activator'); let tl = gsap.timeline({default: {ease: 'power2.inOut'}}); let toggle = false; tl.to('.activator', { background: '#805ad5', 'borderRadius': '5em 0 0 5em' }); tl.to('nav', { 'clipPath' : 'ellipse(100% 100% at 50% 50%)' },'-=.5s') tl.to('nav img', { opacity:1, transform: 'translateX(0)', stagger: .05 },'-=.5s') tl.pause(); card.addEventListener('click', ()=>{ toggle = !toggle; if(toggle ? tl.play() : tl.reverse()); }) </script>

body { margin: 0; height: 100vh; background: black; color: white; display: -ms-grid; display: grid; place-content: center; } header { display: -webkit-box; display: -ms-flexbox; display: flex; } header .activator { padding: 1.5em; border-radius: 100%; cursor: pointer; } header .activator:hover { background: #111010; } img { width: 100%; max-width: 45px; } nav { background: #2c2525; border-radius: 0 5em 5em 0; padding: .5em; -webkit-clip-path: ellipse(50% 50% at -50% 50%); clip-path: ellipse(50% 50% at -50% 50%); } nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; margin: 0; padding: 0; } nav ul li a { display: block; padding: .5rem; margin: 0 .5rem; border-radius: 50%; } nav ul li a:hover { background: #473c3c; } nav ul li a img { opacity: 0; -webkit-transform: translateX(-10px); transform: translateX(-10px); } /*# sourceMappingURL=main.css.map */